<template>
  <div class="templates-container">
    <div class="page-header">
      <h2>战术方案模板</h2>
      <el-button type="primary" @click="createTemplate">创建模板</el-button>
    </div>

    <!-- 模板过滤区域 -->
    <search-form v-model="searchForm" :loading="loading" @search="handleSearch" @reset="handleReset">
      <el-form-item label="模板名称">
        <el-input v-model="searchForm.name" placeholder="请输入模板名称" clearable />
      </el-form-item>
      <el-form-item label="模板类型">
        <el-select v-model="searchForm.type" placeholder="选择模板类型" clearable>
          <el-option label="单兵作战" value="single" />
          <el-option label="系统协同" value="collaboration" />
          <el-option label="攻防对抗" value="confrontation" />
        </el-select>
      </el-form-item>
    </search-form>

    <!-- 模板分类选项卡 -->
    <el-tabs v-model="activeTab" class="template-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="单兵作战模板" name="single">
        <template-card-list :templates="getFilteredTemplates('single')" />
      </el-tab-pane>
      <el-tab-pane label="系统协同模板" name="collaboration">
        <template-card-list :templates="getFilteredTemplates('collaboration')" />
      </el-tab-pane>
      <el-tab-pane label="攻防对抗模板" name="confrontation">
        <template-card-list :templates="getFilteredTemplates('confrontation')" />
      </el-tab-pane>
      <el-tab-pane label="导入的模板" name="imported">
        <template-card-list :templates="getFilteredTemplates('imported')" />
      </el-tab-pane>
    </el-tabs>

    <!-- 模板导入对话框 -->
    <el-dialog v-model="importDialogVisible" title="导入模板" width="500px">
      <el-form :model="importForm" label-width="80px">
        <el-form-item label="模板文件">
          <el-upload
            class="template-upload"
            drag
            action="#"
            :auto-upload="false"
            :limit="1"
            accept=".json,.zip"
          >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
            <template #tip>
              <div class="el-upload__tip">支持 .json 或 .zip 格式的模板文件</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleImportTemplate">导入</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/**
 * 战术方案模板页面
 * @file templates.vue
 */
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import TemplateCardList from '@/components/TemplateCardList/index.vue'
import SearchForm from '@/components/SearchForm/index.vue'

// 搜索表单数据
const searchForm = ref({
  name: '',
  type: ''
})

// 加载状态
const loading = ref(false)

// 模板类型选项卡
const activeTab = ref('single')

// 导入对话框可见性
const importDialogVisible = ref(false)

// 导入表单
const importForm = ref({})

// 模板数据
const templates = ref([
  {
    id: 1,
    name: '工控系统CAN总线单兵渗透模板',
    typeName: '单兵作战',
    typeValue: 'single',
    typeColor: 'success',
    isOfficial: true,
    description: '适用于工业控制系统中CAN总线通信的单兵渗透测试，包含链路嗅探、消息劫持等操作步骤。',
    createTime: '2024-03-15',
    viewCount: 126
  },
  {
    id: 2,
    name: '无人机USB接口逆向分析模板',
    typeName: '单兵作战',
    typeValue: 'single',
    typeColor: 'success',
    isOfficial: true,
    description: '适用于无人机系统中通过USB接口进行逆向分析的场景，包含接口识别、协议分析等步骤。',
    createTime: '2024-03-20',
    viewCount: 98
  },
  {
    id: 3,
    name: '工控协同渗透测试模板',
    typeName: '系统协同',
    typeValue: 'collaboration',
    typeColor: 'warning',
    isOfficial: true,
    description: '适用于多人协作的工业控制系统渗透测试，包含角色分配、通信协作、数据共享等内容。',
    createTime: '2024-03-22',
    viewCount: 85
  },
  {
    id: 4,
    name: '航电系统多点协同攻击模板',
    typeName: '系统协同',
    typeValue: 'collaboration',
    typeColor: 'warning',
    isOfficial: true,
    description: '针对航电系统的多点协同攻击策略，包含1553B总线监听、数据注入等多点配合的攻击手段。',
    createTime: '2024-03-25',
    viewCount: 72
  },
  {
    id: 5,
    name: '工控网络红蓝对抗模板',
    typeName: '攻防对抗',
    typeValue: 'confrontation',
    typeColor: 'danger',
    isOfficial: true,
    description: '工控网络红蓝对抗演练模板，包含攻击方和防御方的角色设置、攻防规则、评分标准等内容。',
    createTime: '2024-03-28',
    viewCount: 116
  },
  {
    id: 6,
    name: 'Modbus协议DoS攻击模板',
    typeName: '单兵作战',
    typeValue: 'single',
    typeColor: 'success',
    isOfficial: false,
    description: '针对使用Modbus协议的工业控制系统，实施DoS攻击的模板，包含攻击点识别、攻击效果验证等。',
    createTime: '2024-04-01',
    viewCount: 42
  },
  {
    id: 7,
    name: 'RS485总线自定义模板',
    typeName: '导入模板',
    typeValue: 'imported',
    typeColor: 'info',
    isOfficial: false,
    description: '用户自定义的RS485总线攻击模板，适用于特定的工业控制设备渗透测试场景。',
    createTime: '2024-04-02',
    viewCount: 18
  }
])

// 根据类型过滤模板
const getFilteredTemplates = (tabName) => {
  const filteredByTab = tabName === 'imported'
    ? templates.value.filter(t => t.typeValue === 'imported')
    : templates.value.filter(t => t.typeValue === tabName)
  
  // 如果有搜索条件，再进一步过滤
  return filteredByTab.filter(t => {
    const nameMatch = !searchForm.value.name || t.name.includes(searchForm.value.name)
    const typeMatch = !searchForm.value.type || t.typeValue === searchForm.value.type
    return nameMatch && typeMatch
  })
}

// 创建模板
const createTemplate = () => {
  ElMessageBox.prompt('请选择创建方式', '创建模板', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'radio',
    inputValue: 'empty',
    inputPlaceholder: '请选择',
    inputOptions: [
      { label: '空白模板', value: 'empty' },
      { label: '从已有方案创建', value: 'fromPlan' },
      { label: '导入模板文件', value: 'import' }
    ]
  }).then(({ value }) => {
    if (value === 'import') {
      importDialogVisible.value = true
    } else if (value === 'fromPlan') {
      ElMessage.info('请前往方案列表选择一个方案，然后点击"保存为模板"')
    } else {
      // 创建空白模板
      ElMessage.success('正在创建空白模板')
    }
  }).catch(() => {
    ElMessage.info('已取消创建')
  })
}

// 处理搜索
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    // 在实际应用中，这里应该调用API进行搜索
    console.log('搜索条件:', searchForm.value)
  }, 300)
}

// 处理重置
const handleReset = () => {
  // 重置操作已由SearchForm组件内部处理
  handleSearch()
}

// 处理选项卡点击
const handleTabClick = () => {
  // 可以在选项卡切换时执行一些操作
  console.log('当前选项卡:', activeTab.value)
}

// 处理导入模板
const handleImportTemplate = () => {
  ElMessage.success('模板导入成功')
  importDialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.templates-container {
  padding: 20px;

    h2 {
      margin: 0;
      color: #1f2f3d;
      font-weight: 500;
    }
  

  .template-tabs {
    margin-top: 20px;
    
    :deep(.el-tabs__item) {
      color: #5e6d82;
      font-size: 15px;
      
      &.is-active {
        color: #409EFF;
        font-weight: 500;
      }
    }
  }
  
  :deep(.el-dialog) {
    border-radius: 8px;
    
    .el-dialog__header {
      background-color: #f5f7fa;
      margin: 0;
      padding: 16px 20px;
      border-bottom: 1px solid #e4e7ed;
      
      .el-dialog__title {
        color: #1f2f3d;
        font-weight: 500;
      }
    }
    
    .el-dialog__body {
      padding: 24px;
    }
    
    .el-dialog__footer {
      padding: 16px 20px;
      border-top: 1px solid #e4e7ed;
    }
    
    .template-upload {
      .el-upload-dragger {
        background-color: #f9fafc;
        border: 1px dashed #d9ecff;
        border-radius: 8px;
        
        &:hover {
          background-color: #f0f9ff;
          border-color: #409EFF;
        }
        
        .el-icon--upload {
          color: #409EFF;
        }
      }
      
      .el-upload__text {
        color: #5e6d82;
        
        em {
          color: #409EFF;
          font-style: normal;
        }
      }
      
      .el-upload__tip {
        color: #909399;
        font-size: 13px;
      }
    }
  }

  :deep(.template-list) {
    margin-top: 20px;

    .template-card {
      height: 100%;
      margin-bottom: 20px;
      transition: all 0.3s;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      }

      .card-content {
        display: flex;
        flex-direction: column;
        height: 100%;

        .template-name {
          margin-top: 0;
          margin-bottom: 10px;
          font-size: 16px;
          font-weight: 500;
          color: #303133;
        }

        .template-tags {
          display: flex;
          gap: 8px;
          margin-bottom: 10px;
        }

        .template-desc {
          flex: 1;
          color: #606266;
          font-size: 14px;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          margin-bottom: 15px;
        }

        .template-info {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #909399;
          margin-bottom: 15px;

          span {
            display: flex;
            align-items: center;
            gap: 5px;

            .el-icon {
              font-size: 14px;
            }
          }
        }

        .template-actions {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 8px;
        }
      }
    }
  }
}
</style> 